<template>
  <div class="sidebar-card user-card">
    <!-- 头像 -->
    <div class="avatar">
      <img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="avatar" />
    </div>

    <!-- 昵称 -->
    <div class="nickname">小坚黑白</div>

    <!-- 个人中心按钮 -->
    <button class="profile-button" @click="goProfile">个人中心</button>

    <!-- 金币信息 -->
    <div class="gold-info">
      <div class="gold-label">金币余额</div>
      <div class="gold-count">0</div>
    </div>

    <!-- 充值按钮 -->
    <button class="recharge-button" @click="goRecharge">立即充值</button>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { watch } from 'vue'
import { useUserStoreHook } from '@/store/modules/user'
const router = useRouter()
const route = useRoute()
const userStore = useUserStoreHook()
function goProfile() {
  router.push({ path: '/user', query: { tab: 'profile' } })
}
function goRecharge() {
  router.push({ path: '/user', query: { tab: 'my-posts' } })
}
// 监听路由变化，刷新用户信息（重新读取本地存储）
watch(
  () => route.path,
  () => {
    // 重新读取本地存储，强制触发响应式
    userStore.avatar = userStore.avatar
    userStore.username = userStore.username
    userStore.nickname = userStore.nickname
  }
)
</script>

<style scoped>
.user-card {
  text-align: center;
  padding: 16px 12px;
}

.avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 8px;
  border: 1px solid #2979ff;
}

.nickname {
  font-size: 1rem;
  font-weight: 600;
  margin: 4px 0;
}

.profile-button {
  background-color: #2979ff;
  color: #fff;
  border: none;
  padding: 4px 12px;
  font-size: 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  margin: 6px 0 12px 0;
  transition: background-color 0.3s;
}

.profile-button:hover {
  background-color: #66b1ff;
}

.gold-info {
  background-color: #f5f7fa;
  padding: 8px 0;
  border-radius: 6px;
  margin-bottom: 12px;
}

.gold-label {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 2px;
}

.gold-count {
  font-size: 1.6rem;
  font-weight: bold;
  color: #faad14;
  margin-top: 2px;
}

.recharge-button {
  background-color: #21ba45;
  color: white;
  padding: 6px 18px;
  font-size: 0.9rem;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.recharge-button:hover {
  background-color: #16ab39;
}
</style>
